<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {include file="/layout/scriptload"}
    <title>添加子分类</title>
    <style>
        .tier_top{width: 100%;height: 34px;margin-bottom: 20px;}
        .tier_num{width: 60px;height: 34px;line-height: 34px;text-align: center;border: 1px solid #d2d6de;float: left;}
        .tier    {width: 50%; height: 34px;padding: 6px 12px;border: 1px solid #d2d6de;margin: 0px 7px;float: left;}
        .tier_del{width: 34px;height: 34px;line-height: 34px;text-align: center;background: #e74c3c;color: #ffffff;border-radius: 3px;cursor: pointer;float: left;}
        .tier_add{width: 60px;height: 34px;line-height: 34px;text-align: center;background: #18bc9c;color: #ffffff;border-radius: 3px;border: 0px;cursor: pointer;}
        #tip{color: #e74c3c;margin-top: 5px;display: none;}
    </style>
</head>
<body>
<div class="box">
    <!-- /.box-header -->
    <section class="content">
        <div class="box-body">
            <form role="form">
                <div class="form-group col-md-7">
                    <label>循环组名称</label>
                    <input type="text" id="groupname" class="form-control"  placeholder="请输入...">
                </div>
                <div class="form-group col-md-7">
                    <label>循环组说明</label>
                    <textarea class="form-control" id="remark" cols="30" rows="4" placeholder="请输入..."></textarea>
                </div>
                <div class="form-group col-md-7" id="tier">
                    <label>账号池层级关系</label>
                    <div class="tier_top">
                        <div class="tier_num">第<span class="hierarchy_num">1</span>层</div>
                        <select class="tier">
                            {volist name="list" id="v"}
                            <option value="{$v.id}">{$v.poolname}</option>
                            {/volist}
                        </select>
                        <div class="tier_del"><i class="fa fa-remove"></i></div>
                    </div>
                </div>
                <div class="form-group col-md-7">
                    <button class="tier_add"><i class="fa fa-plus"></i>追加</button>
                    <div id="tip">每一个节点只能有一个下级节点</div>
                </div>
                <div class="form-group col-md-7" >
                    <div id="btn_save" class="btn pull-right" style="background: #18bc9c;color: #ffffff;">保存</div>
                </div>
            </form>
        </div>
    </section>
</div>
</body>
<script>
    var _num = 1;
    var _show = 1;
    $(function(){
        //层级删除
        $('#tier').on('click','.tier_del',function(){
            _num = _num-1;
            var $_this = $(this);
            var numlist = $_this.parent().nextAll('.tier_top').children('.tier_num').children('.hierarchy_num');
            $.each(numlist,function (index, item) {
                var $_this2 = $(this);
                var  _k = $_this2.text();
                var _n = parseInt(_k)-1;
                $_this2.text(_n);
            });
            var _sval = $_this.prev('.tier').val();
            if(_sval == 0){
                toshow();
            }
            $_this.parent().remove();
        });
        //添加层级
        $('.tier_add').click(function(){
            _num = _num+1;
            var html = '<div class="tier_top">';
            html += ' <div class="tier_num">第 <span class="hierarchy_num">'+_num+'</span>层</div>';
            html += '<select class="tier">';
            html += '<option value="0" selected="selected">请选择...</option>';
            html += '{volist name="list" id="v"}';
            html += '<option value="{$v.id}">{$v.poolname}</option>';
            html += '{/volist}';
            html += '</select>';
            html += ' <div class="tier_del"><i class="fa fa-remove"></i></div>';
            html += '</div>';
            $('#tier').append(html);
            todisabled();
        });
        //判断是否选择同样的账号池
        $('#tier').on('change','.tier',function () {
            _show = 1;
            var $_this3 = $(this);
            var _tierval = $_this3.val();
            if(_tierval == 0){
                todisabled();
                $('#tip').hide();
                return false;
            }
            var _parame = $_this3.parent().prevAll('.tier_top').children('.tier');
            $.each(_parame,function (index, item) {
                var $_this4 = $(this);
                var _val = $_this4.val();
                if(_tierval == _val ){
                    $('#tip').show();
                    todisabled();
                    _show = 2;
                    return false;
                }
            });
            if(_show == 1){
                toshow();
                $('#tip').hide();
            }
        });
        //保存
        $('#btn_save').click(function(){
            var _groupname = $('#groupname').val();
            var _remark = $('#remark').val();
            if(_groupname == ''){
                layerAlert('循环组名称不能为空');
                return false;
            }
            var _list = $('.tier');
            var _vallist = [];
            $.each(_list,function (index,item) {
                var $_this6 = $(this);
                _vallist.push($_this6.val());
            });
            $.ajax({
                type:'post',
                cache: false,
                url:"{:url('replyfans/doAddCyclic')}",
                data:{groupname:_groupname,remark:_remark,vallist:_vallist},
                success:function(data){
                    if(data.code==0){
                        layerAlert(data.msg,function(){
                            parent.relist();
                            layerParentClose();
                        });
                    }else{
                        layerAlert(data.msg);
                    }
                }
            })
        })
    })
    function todisabled() {
        $('.tier_add').attr('disabled','disabled');
        $('.tier_add').css('background','rgba(24,188,156,0.6)');
        $('.tier_add').css('cursor','not-allowed');
    }
    function toshow() {
        $('.tier_add').removeAttr('disabled');
        $('.tier_add').css('background','rgba(24,188,156)');
        $('.tier_add').css('cursor','pointer');
    }
</script>
</html>